<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Hello World!</title>
  <script src="./Build/CesiumUnminified/Cesium.js"></script>
  <style>
    @import url(./Build/CesiumUnminified//Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNWY1NTNiZC0yOWZjLTQxYTEtYmFmZS0zZDhhOWRmMmMyM2YiLCJpZCI6MTM2MDIyLCJpYXQiOjE2ODI2NzE3NjR9.iCrukqqU__ODBrOwYgkTzv2fyg_yAli8GyePHhjgiFc';

    const viewer = new Cesium.Viewer("cesiumContainer", {
      baseLayerPicker: true,//是否显示图层选择器 
    })

    let redWall = viewer.entities.add({
      name: 'Red wall at height',
      wall: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          121.444409, 31.247417, 200.0,
          121.533521, 31.235685, 200.0,
          121.563273, 31.190347, 200.0,
          121.546744, 31.194054, 200.0,
          121.516705, 31.191459, 200.0,
          121.502188, 31.203074, 200.0
        ]),
        minimumHeights: [3000.0, 2000.0, 2000, 2000, 2000, 3000],
        material: getColorRamp([0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0], true)
      }
    });

    //纹理图绘制
    function getColorRamp(elevationRamp) {
      var ramp = document.createElement('canvas');
      ramp.width = 1;
      ramp.height = 100;
      var ctx = ramp.getContext('2d');

      var values = elevationRamp;
      var grd = ctx.createLinearGradient(0, 0, 0, 100);
      grd.addColorStop(values[0], '#000000'); //black
      grd.addColorStop(values[1], '#2747E0'); //blue
      grd.addColorStop(values[2], '#D33B7D'); //pink
      grd.addColorStop(values[3], '#D33038'); //red
      grd.addColorStop(values[4], '#FF9742'); //orange
      grd.addColorStop(values[5], '#ffd700'); //yellow
      grd.addColorStop(values[6], '#ffffff'); //white

      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, 1, 100);
      return ramp;
    }
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(121.444409, 31.247417, 1000.0),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: 0
      }
    })
    viewer.zoomTo(redWall);
  </script>
</body>

</html>